<template>
  <el-main style="padding: 0px 20px">
    <div style="margin:20px 0px">
      <div style="margin:20px 0px">
        <el-button icon="el-icon-plus" v-if="hasPerm('sys:dept:add')" type="success" size="medium" @click="addDept">新增</el-button>
      </div>
    </div>
    <el-table
      :height="tableHeight"
      :data="deptList"
      border
      stripe
      row-key="id"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column width="300px" prop="deptName" label="名称"></el-table-column>
      <el-table-column width="120px" prop="type" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag size="normal" v-if="scope.row.type == '0' && scope.row.deptName.includes('院')"  >学院</el-tag>
          <el-tag size="normal" v-if="scope.row.type == '0' && !scope.row.deptName.includes('院')"  >组织</el-tag>

          <el-tag size="normal" type="success" v-if="scope.row.type == '1' && scope.row.deptName.includes('部')">部门</el-tag>
          <el-tag size="normal" type="success" v-if="scope.row.type == '1' && !scope.row.deptName.includes('部')">专业</el-tag>

          <el-tag size="normal" type="danger" v-if="scope.row.type == '2'">班级</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100px" prop="deptCode" align="center" label="代码"></el-table-column>
      <el-table-column prop="remark" align="center" label="介绍" show-overflow-tooltip></el-table-column>
      <el-table-column width="200px" prop="createTime" align="center" label="创建时间"></el-table-column>

      <el-table-column align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button v-if="hasPerm('sys:dept:edit')" type="primary" icon="el-icon-edit" size="small" @click="editDept(scope.row)">编辑</el-button>
          <el-button v-if="hasPerm('sys:dept:delete')" type="danger" icon="el-icon-delete" size="small" @click="deleteDept(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或编辑弹框 -->
    <my-dialog
      :title="deptDialog.title"
      :width="deptDialog.width"
      :height="deptDialog.height"
      :visible="deptDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="deptFormData"
          ref="deptFormRef"
          :rules="rules"
          label-width="80px"
          size="small"
        >

          <el-form-item size="small" label="父级类型">
            <el-cascader
              clearable
              filterable
              placeholder="点击选择或输入搜索父级类型(不选择默认新增学院类型)"
              @change="selectType"
              v-model="deptFormData.pid"
              :options="parentDeptList"
              :props="cascaderProps"
              style="min-width: 458px;"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item prop="deptName" size="small" label="组织名称">
            <el-input v-model="deptFormData.deptName"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="13">
              <el-form-item prop="deptCode" size="small" label="组织代码">
                <el-input v-model="deptFormData.deptCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1">
              <el-form-item prop="sort" size="small" label="组织序号">
                <el-input-number
                  controls-position="right"
                  v-model.number="deptFormData.sort"
                  :min="0"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item prop="remark" size="small" label="组织介绍">
            <el-input
              type="textarea"
              maxlength="100"
              show-word-limit
              v-model="deptFormData.remark"
              :rows="5"
              resize="none"
              placeholder="（限100字）"
            ></el-input>
          </el-form-item>

        </el-form>
      </div>
    </my-dialog>
  </el-main>
</template>

<script>
import {
  getDeptListApi,
  getParentTreeApi,
  addDeptApi,
  editDeptApi,
  deleteDeptApi
} from "@/api/department";
import myDialog from "@/components/MyDialog/index";
export default {
  components: { myDialog },
  data() {
    var checkDeptCode = (rule, value, callback) => {
      if(value){
          let reNum =  /^\d{2}$/;
          if(reNum.test(value)){
              callback();
          }else{
              callback(new Error('部门编号应为01-99的两位数字！'));
          }
      }else{
          callback();
      }
    };
    return {
      cascaderProps:{
        checkStrictly: true,
        // emitPath: false,
        expandTrigger:'hover'
      },
      //新增或编辑表单验证规则
      rules: {
        deptName: { required: true, trigger: "blur", message: "请填写组织名称" },
        deptCode: [
          { required: true, trigger: "blur", message: "请填写组织代码" },
          { validator: checkDeptCode, trigger: 'blur' }
        ],
        sort: { type: "number", trigger: "blur", message: "请输入合法数字" }
      },
      //true：编辑 flase :新增
      actionType: "",
      //新增或编辑表单数据域
      deptFormData: {
        id: "",
        pid: "",
        deptName: "",
        deptCode: "",
        remark: "",
        type: "",
        sort: "",
        version:"",
      },
      //新增或编辑弹框属性
      deptDialog: {
        title: "",
        width: 620,
        height: 290,
        visible: false,
      },
      //表格高度
      tableHeight: 0,
      //组织数量列表
      deptList: [],
      parentDeptList: [],
    };
  },
  created() {
    this.getDeptList();
    this.getParentMenuList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 170;
    })
  },
  methods: {
    //根据父节点决定类型
    selectType(){
      if(this.deptFormData.pid){
        switch(this.deptFormData.pid.length){
          case 0:
            this.deptFormData.type=0
          break;
          case 1:
            this.deptFormData.type=1
          break;
          case 2:
            this.deptFormData.type=2
          break;
          default:
            this.deptFormData.type=0
          break;
        }
      }
    },
    //新增或编辑确认
    onConfirm() {
      this.$refs.deptFormRef.validate(async (valid) => {
        if (valid) {
          let tmp = "";
          switch(this.deptFormData.type){
            case 0:
              this.deptFormData.pid=0
            break;
            case 1:
              tmp = this.deptFormData.pid[0]
              this.deptFormData.pid = tmp
            break;
            case 2:
              tmp = this.deptFormData.pid[1]
              this.deptFormData.pid = tmp
            break;
            default:
              this.deptFormData.pid=0
            break;
          }
          let res = null;
          if (this.actionType) {
            //编辑
            res = await editDeptApi(this.deptFormData);
          } else {
            //新增
            res = await addDeptApi(this.deptFormData);
          }
          if (res && res.code == 200) {
            //刷新列表
            this.getDeptList();
            this.getParentMenuList();
            this.deptDialog.visible = false;
            this.$message.success(res.msg);
          }
        }
      });
    },
    //新增或编辑取消
    onClose() {
      this.deptDialog.visible = false;
    },
    //新增按钮
    addDept() {
      this.$resetForm("deptFormRef", this.deptFormData);
      this.deptDialog.title = "新增组织";
      this.deptDialog.visible = true;
      this.actionType = false;
    },
    //编辑按钮
    editDept(row) {
      this.$resetForm("deptFormRef", this.deptFormData);
      //把当前要编辑的数据复制到数据域，tApi给表单回显
      this.$objCoppy(row, this.deptFormData);
      //设置编辑的标识
      this.actionType = true;
      //设置弹框属性
      this.deptDialog.title = "编辑组织";
      this.deptDialog.visible = true;
    },
    //删除按钮
    async deleteDept(row) {
      let warning = "确定删除该组织吗？"
      if(row.children.length > 0) warning = "该组织下包含其它组织，确定删除吗？"
      let confirm = await this.$myconfirm(warning);
      if (confirm) {
        let res = await deleteDeptApi({id: row.id});
        if (res && res.code == 200) {
          //刷新列表
          this.getDeptList();
          this.getParentMenuList();
          this.$message.success(res.msg);
        }
      }
    },
    //获取组织列表
    async getDeptList() {
      let res = await getDeptListApi();
      if (res && res.code == 200) {
        this.deptList = res.data;
      }
    },
    //获取父级组织
    async getParentMenuList() {
      let res = await getParentTreeApi();
      if (res && res.code == 200) {
        this.parentDeptList = res.data;
      }
    }
  }
};
</script>
